import { reactive, watch } from 'vue'
import { isBoolean, isArray, isString } from '@naturefw/nf-tool'

import { createPartModel } from './createPartModel'

import type {
  IFromProps, // 表单组件的属性
  IRuleMeta, // 验证
  IFormColShow, // 子组件的联动
  ISubs, // 分栏
  IFromMeta // 表单控件需要的 meta
} from '../../types/30-form'

import type { IFormItem, IFormItemList } from '../../types/20-form-item'

type ShowCol = {
  [id: number | string]: boolean
}
/**
 * 设置备选项和子控件的联动
 * @param formMeta 表单控件的meta
 * @param model 表单完整的 model
 * @param partModel 表单部分 的 model
 * @returns 
 */
export const setControlShow = (
  formMeta: IFromMeta,
  itemMeta: IFormItemList,
  model: any,
  partModel: any
) => {
  
  const {
    formColShow,
    colOrder
  } = formMeta
  
  // 设置字段的是否可见
  const showCol = reactive<ShowCol>({})
  // 依据meta设置，默认都可见
  const setShow = () => {
    if (typeof itemMeta === 'object') {
      for (const key in itemMeta) {
        showCol[key] = true
      }
    }
  }

  // 设置联动
  const setFormColShow = () => {
    setShow()
    // 数据变化，联动组件的显示
    if (typeof formColShow === 'object' && Object.keys(formColShow).length > 0) {
      for (const key in formColShow) {
        const ctl = formColShow[key]
        const colName = itemMeta[key].colName
        // 监听组件的值，有变化就重新设置局部 model
        if (typeof model[colName] !== 'undefined') {
          watch(() => model[colName], (v1, v2) => {
            if (typeof ctl[v1] !== 'undefined') {
              // 判断是不是bool类型。
              if (isBoolean(v1)) {
                // 设置指定的控件是否可见，其他控件不设置
                ctl[v1].forEach(id => {
                  let _id = id
                  let bl = v1
                  if (isArray(id)) {
                    _id = id[0]
                    // 设置子控件的值
                    const colName = itemMeta[_id].colName
                    model[colName] = id[1]
                  }
                  // 字符串形式的ID，取反
                  if (isString(_id)) {
                    bl = !v1
                  }
                  showCol[_id] = bl // 以 父级控件的值为准
                })
              } else {
                for (const key in itemMeta) {
                  showCol[key] = false
                }
                ctl[v1].forEach(id => {
                  showCol[id] = true
                })
              }
              // 设置部分的 model
              createPartModel(model, partModel, itemMeta, showCol)
  
            }
          },
          { immediate: true })
        }
      }
      // 监听完整model的值的变化，同步值
      if (typeof partModel !== 'undefined') {
        watch(model, () => {
          for (const key in model) {
            if (typeof(partModel[key]) !== 'undefined') {
              partModel[key] = model[key]
            }
          }
        })
      }
    }
  }
  setFormColShow()
  watch(() => colOrder, (order) => {
    order.forEach((id: number) => {
      showCol[id] = true
    })
    // setFormColShow()
  })
  
  return {
    showCol,
    setFormColShow
  }
}